<template>
  <div class="login">
    <el-card class="box-card card" style="padding: 10px;">
      <div class="login-img" v-if="!isAdmin">
        <img src="~@/assets/family.png"/>
      </div>
      <div v-if="isAdmin" class="login-img">
        <img src="~@/assets/king国王.png"/>
      </div>
      <p v-if="!isAdmin" class="login-welcome">欢迎登录！</p>
      <p v-if="isAdmin" class="login-welcome">欢迎管理员</p>
      <el-form :model="formCustom" status-icon :rules="rules" ref="formCustom">
        <el-form-item prop="phone">
          <el-input
              prefix-icon="el-icon-user"
              type="text"
              v-model="formCustom.phone"
              placeholder="手机号"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              prefix-icon="el-icon-lock"
              type="password"
              v-model="formCustom.password"
              placeholder="密码"
              autocomplete="off"
          ></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button v-loading="loading" class="btn" @click="login('formCustom')">登录</el-button>
          <div class="a-tag user" v-if="!isAdmin">
            <router-link to="/register">立即注册</router-link>
            <a style="cursor: pointer" @click="aa">找回密码</a>
          </div>
        </div>
      </el-form>
    </el-card>
    <el-tooltip class="item" effect="dark" :content="isAdmin?child:admin" placement="top-end">
      <div style="height: 40px;width: 40px;position: absolute;right: 10px;bottom: 10px;cursor: pointer"
           @click="isAdmin=!isAdmin">
        <img v-if="!isAdmin" src="../assets/king国王.png" width="40px" height="40px">
        <img v-if="isAdmin" src="../assets/baby.png" width="40px" height="40px">
      </div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: "login",
  data: function () {
    return {
      child: "您好啊，我的小baby",
      admin: "您好啊，我的国王陛下",
      formCustom: {
        phone: "",
        password: ""
      },
      loading: false,
      rules: {
        phone: [
          {required: true, message: "请输入手机号", trigger: "blur"},
          {
            min: 11,
            max: 11,
            message: "请输入正确手机号",
            trigger: "change"
          },
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {
            min: 5,
            max: 20,
            message: "长度在 5 到 20 个字符",
            trigger: "change",
          },
        ],
      },
      isAdmin: false
    }
  },
  mounted() {
    if (this.$route.query.token) {
      this.$store.dispatch("setToken", this.$route.query.token);
      this.$store.dispatch("userInfo");
      this.$router.push("/blogshow");
      this.$message({
        showClose: true,
        message: "登录成功",
        type: "success",
      });
    }
  },
  methods: {
    aa() {
      this.$message.warning("抱歉，此功能开发中，可能因为博主懒就鸽了！")
    },
    checkThisUserIsRegisterFamily() {
      return new Promise(resolve => {
        this.$http.get("/login/checkThisUserIsRegisterFamily").then(data => {
          resolve(data.data)
        })
      })
    },
    login(formName) {
      if (!this.isAdmin) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let that = this;
            if (!that.loading) {
              that.loading = true;
              that.loading = true;
              this.$http.post("/login/login", this.formCustom).then(async data => {
                //console.log(data)
                if (data.data.info == 'success') {
                  that.loading = false;
                  await this.$store.commit("setToken", data.data.token)
                  await this.$message.success("登陆成功")
                  this.checkThisUserIsRegisterFamily().then(data => {
                    if (data) {
                      this.$router.push("/dataVisualization");
                    } else {
                      this.$router.push("/warning");
                    }
                  })
                } else {
                  that.loading = false;
                  await this.$message.error("登陆失败，原因：" + data.data.info)
                  this.formCustom = {
                    phone: "",
                    password: "",
                  }
                }
              })
            } else {
              that.$message({
                showClose: true,
                message: "正在登录中……",
                type: "success",
              });
            }
          } else {
            this.$notify.error({
              title: "错误",
              message: "按照提示正确填写账号和密码",
            });
            return false;
          }
        });
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let that = this;
            if (!that.loading) {
              that.loading = true;
              that.loading = true;
              this.$http.post("/login/login", this.formCustom).then(async data => {
                //console.log(data)
                if (data.data.info == 'success') {
                  that.loading = false;
                  await this.$store.commit("setToken", data.data.token)
                  await this.$message.success("登陆成功")
                  this.checkThisUserIsRegisterFamily().then(data => {
                    if (data) {
                      this.$router.push("/adminShow");
                    } else {
                      this.$router.push("/warning");
                    }
                  })
                } else {
                  that.loading = false;
                  await this.$message.error("登陆失败，原因：" + data.data.info)
                  this.formCustom = {
                    phone: "",
                    password: "",
                  }
                }
              })
            } else {
              that.$message({
                showClose: true,
                message: "正在登录中……",
                type: "success",
              });
            }
          } else {
            this.$notify.error({
              title: "错误",
              message: "按照提示正确填写账号和密码",
            });
            return false;
          }
        });
      }
    }
  }
}
</script>

<style scoped>
.login {
  height: 100vh;
  position: relative;
  background: linear-gradient(
      270deg, rgba(142, 239, 252, .9), rgba(142, 197, 252, .6));
}

.card {
  width: 300px;
  height: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login-img {
  /*width: 60%;*/
  height: 50px;
  border-radius: 20px;
  border: 1px dashed #eaeaea;
}

img {
  height: 100%;
  /*width: 100%;*/
}

p {
  text-align: center;
  color: #51cacc;
  line-height: 30px;
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-top: 15px;
}

.btn {
  width: 100%;
  height: 40px;
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(142, 239, 252, .9)), to(rgba(142, 197, 252, .6)));
  background-image: linear-gradient(
      270deg, rgba(142, 239, 252, .9), rgba(142, 197, 252, .6));
  color: #fff;
  margin: 20px 0;
}

a {
  color: #51cacc;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: all .6s;
  transition: all .6s;
  position: relative;
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}

.user {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px
}
</style>